<template>
    <div>
        <div class="add-container">
            <div class="add-title">
                <h1>添加收货地址</h1>
            </div>
            <div class="add-box">
                <Form :model="formData" ref="formData" label-position="left" :label-width="100" :rules="ruleInline">
                    <FormItem label="收件人" prop="name">
                        <i-input v-model="formData.name" size="large"></i-input>
                    </FormItem>
                    <FormItem label="收件地区" prop="address">
                        <Distpicker :province="formData.province" :city="formData.city" :area="formData.area"
                                    @province="getProvince" @city="getCity" @area="getArea"></Distpicker>
                    </FormItem>
                    <FormItem label="收件地址" prop="address">
                        <i-input v-model="formData.address" size="large"></i-input>
                    </FormItem>
                    <FormItem label="手机号码" prop="phone">
                        <i-input v-model="formData.phone" size="large"></i-input>
                    </FormItem>
                </Form>
            </div>
            <div class="add-submit">
                <Button type="primary" @click="addAddress('formData')">添加地址</Button>
            </div>
        </div>
    </div>
</template>

<script>
    import Distpicker from 'v-distpicker';
    import {mapActions} from "vuex";

    export default {
        name: 'AddAddress',
        data() {
            return {
                formData: {
                    name: '',
                    address: '',
                    phone: '',
                    postalcode: '',
                    province: '',
                    city: '',
                    area: ''
                },
                ruleInline: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                    postalcode: [
                        {required: true, message: '请输入邮政编码', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                        {type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            ...mapActions(["getUser","setUserAddress"]),
            getProvince(data) {
                this.formData.province = data.value;
            },
            getCity(data) {
                this.formData.city = data.value;
            },
            getArea(data) {
                this.formData.area = data.value;
            },
            addAddress(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        this.$axios
                            .post("/item/addaddress", {
                                "addressId": 0,
                                "isDefault": false,
                                "streetName": this.formData.province + "" + this.formData.city + "" + this.formData.area + "" + this.formData.address,
                                "tel": this.formData.phone,
                                "userId": this.$store.getters.getUser.id,
                                "userName": this.formData.name
                            })
                            .then(res => {
                                this.getUserAddressList();
                                this.notifySucceed("添加成功");
                                setTimeout(() => {
                                    this.$router.push("/personalcenter/myAddress");
                                }, 1000)
                            })
                            .catch(err => {
                                return Promise.reject(err);
                            });
                    }else{
                        this.notifyError("请填写完整信息");
                    }
                })

            },
            getUserAddressList() {
                this.$axios
                    .get("/item/getlistaddress", {
                        params: {
                            userId: this.$store.getters.getUser.id
                        }
                    })
                    .then(res => {
                        //用户收货地址信息保存到vuex
                        this.setUserAddress(res.data.result);
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            }
        },
        components: {
            Distpicker
        }
    };
</script>

<style scoped>
    .add-container {
        margin: 15px auto;
        width: 60%;
        min-width: 600px;
    }

    .add-title {
        margin-bottom: 15px;
        text-align: center;
    }

    .add-submit {
        display: flex;
        justify-content: center;
    }
</style>
